<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="!dataForm.id ? `${$t('add')}职位` : `${$t('update')}职位`"
               :modal="false"
               class="user-dialog add-or-updata"
               width="30%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="80px">
        <el-form-item label="职位名称"
                      :rules="stringRule()">
          <el-input v-model="dataForm.name"
                    show-word-limit
                    maxlength="20"
                    style="padding: 0 46px 0 0"></el-input>
        </el-form-item>
        <el-form-item label="职位编号"
                      :rules="stringRule()">
          <el-input v-model="dataForm.code"
                    show-word-limit
                    maxlength="10"
                    @input="val => dataForm.code = val.replace(/[^a-zA-Z0-9]/g, '')"
                    style="padding: 0 46px 0 0"></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      :rules="stringRule()">
          <el-switch v-model="dataForm.status"
                     active-color="#13ce66"
                     :active-value="1"
                     :inactive-value="0"
                     inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '', // 添加或修改接口，API地址
        updateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {
        status: 1,
        code: '',
        name: ''
      }
    }
  },
  components: { },
  methods: {
    init (data) {
      if (data) {
        this.dataForm = data
      }
      this.visible = true
      this.$nextTick(() => {
      })
    },
    closeDialog () {
      this.dataForm.id = ''
      this.dataForm.name = ''
      this.dataForm.code = ''
      this.dataForm.status = 1
      this.visible = false
      this.$emit('callBack')
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            let arr = {}
            if (this.dataForm.id) {
              arr.id = this.dataForm.id
              arr.creator = this.dataForm.creator
              arr.createDate = this.dataForm.createDate
            //   arr.source = this.dataForm.source
            }
            arr.name = this.dataForm.name
            arr.code = this.dataForm.code
            arr.status = this.dataForm.status
            if (this.dataForm.id) {
              this.$http.put('system/sysPosition', arr).then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  this.$message.success('保存成功')
                  this.closeDialog()
                }
              })
            } else {
              this.$http.post('system/sysPosition', arr).then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg)
                } else {
                  this.$message.success('添加成功')
                  this.closeDialog()
                }
              })
            }
          }
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>
<style lang="scss" scoped>
</style>
